<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户登录信息验证</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户注册</legend>
</fieldset>
<form class="layui-form" action="Stroller.do">
    <div class="layui-form-item" >
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input  id="username" name="username" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"  class="layui-input" type="text" placeholder="请输入用户名" autocomplete="off" lay-verify="title">
        </div>
        <div class="layui-form-mid " id="userdiv" style="color: #999999">用户名只能由字母组成</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input name="password" id="pwd" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
            <input name="pwd" id="pwdn" class="layui-input" type="text" placeholder="请输入" autocomplete="off" lay-verify="required">
        </div>
        <div class="layui-form-mid " id="pwdns" style="color: #999999">密码等待确认</div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input name="phone" onKeyUp="value=value.replace(/\D/g,'')"   class="layui-input" type="tel" autocomplete="off" lay-verify="required|phone">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input name="number" class="layui-input"  id="num" type="text" autocomplete="off" lay-verify="required|number">
            </div>
            <div class="layui-form-mid"><canvas   id="canvas" width="150px" height="50px" ></canvas></div>
            <div  id="numberdiv"  class="layui-form-mid " id="number" style="color: #999999">验证码等待确认</div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="demo1" type="submit"  >立即注册</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
    //用户名输入
    var $userName = $("#username");
    $userName.blur(function () {
        if(this.value.replace(/^ +| +$/g,'')=='')
            alert('不能为空!');
        var $userVal=$userName.val();//获得到input的输入值
        $userName[0].setAttribute("value",$userVal);//$的0号位置是js对象
//        console.log($userName[0].value);
        $.ajax({
            "url":"/userController.do?value="+$userName[0].value,//发送value的值
            "Type":"get",
            "contentType": "chars" +
            "et=utf-8",
        }).done(function (data) {
            //得到服务器发送的data(String)并转为对象
            var parse = JSON.parse(data);
            var name = parse[0].userName;
            if(name==$userName[0].value){
                var $userdiv = $("#userdiv");
                $userdiv[0].innerText="此用户名已经被注册";
                $userdiv[0].setAttribute("style","color: red");
            }
            else {
                var $userdiv = $("#userdiv");
                if($userName.val()!=0){
                    $userdiv[0].innerText="此用户名可以注册";
                    $userdiv[0].setAttribute("style","color:#00ff00");
                }
            }
        }).fail()
    });

    //密码输入
    var $pwd=$("#pwd");
    var $pwdn=$("#pwdn");
    $pwdn.blur(function () {
        var $pwdVAl=$pwd.val();//获得到input的输入值
        var $pwdnval=$pwdn.val();//获得到input的输入值
        console.log($pwdnval);
        if($pwdVAl==$pwdnval){
            var $pwdnsdiv = $("#pwdns");
            $pwdnsdiv[0].innerText="密码输入一致";
            $pwdnsdiv[0].setAttribute("style","color:#00ff00");
        }else{
            var $pwdnsdiv = $("#pwdns");
            $pwdnsdiv[0].innerText="密码输入不一致";
            $pwdnsdiv[0].setAttribute("style","color:red");
        }
    });

    //生成随机数
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
    //生成随机颜色RGB分量
    function randomColor(min,max){
        var _r = randomNum(min,max);
        var _g = randomNum(min,max);
        var _b = randomNum(min,max);
        return "rgb("+_r+","+_g+","+_b+")";
    }
    //先阻止画布默认点击发生的行为再执行drawPic()方法
    document.getElementById("canvas").onclick = function(e){
        e.preventDefault();
        drawPic();
    };
    var _picTxt = "";//随机数
    function drawPic(){
        //获取到元素canvas
        var $canvas = document.getElementById("canvas");
        var _str = "0123456789";//设置随机数库

        var _num = 4;//4个随机数字
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");//获取 context 对象
        ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
        ctx.fillStyle = randomColor(180,240);//填充画布颜色
        ctx.fillRect(0,0,_width,_height);//填充矩形--画画
        for(var i=0; i<_num; i++){
            var x = (_width-10)/_num*i+10;
            var y = randomNum(_height/2,_height);
            var deg = randomNum(-45,45);
            var txt = _str[randomNum(0,_str.length)];
            _picTxt += txt;//获取一个随机数
            ctx.fillStyle = randomColor(10,100);//填充随机颜色
            ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小，字体为SimHei
            ctx.translate(x,y);//将当前xy坐标作为原始坐标
            ctx.rotate(deg*Math.PI/180);//旋转随机角度
            ctx.fillText(txt, 0,0);//绘制填色的文本
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
        }
        for(var i=0; i<_num; i++){
            //定义笔触颜色
            ctx.strokeStyle = randomColor(90,180);
            ctx.beginPath();
            //随机划线--4条路径
            ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
            ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
            ctx.stroke();
        }
        for(var i=0; i<_num*10; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            //随机画原，填充颜色
            ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
//        return _picTxt;//返回随机数字符串
        console.log(_picTxt);


    }
    drawPic();
    var $num=$("#num");//验证码input的值
    $num.blur(function () {
        var $numVAl=$num.val();//获得到input的输入值
        if($numVAl==_picTxt){
            var $numdiv = $("#numberdiv");
            $numdiv[0].innerText="验证码正确";
            $numdiv[0].setAttribute("style","color:#00ff00");
        }else{
            var $numdiv = $("#numberdiv");
            $numdiv[0].innerText="验证码错误";
            $numdiv[0].setAttribute("style","color:red");
        }

    });




</script>
</body>
</html>